<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd()">新增</a-button>
      <a-button @click="handleSearch">刷新</a-button>
    </div>

    <a-table
      ref="table"
      rowKey="deptId"
      :pagination="false"
      :loading="loading"
      :columns="columns"
      :expandedRowKeys="expandedKeys"
      @expand="onExpand"
      :dataSource="data"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button type="primary" ghost size="small" class="_mr-5" @click="handleEdit(record)">
            编辑
          </a-button>
          <a-button type="primary" ghost size="small" class="_mr-5" @click="groupDelId(record)">
            删除
          </a-button>
        </template>
      </span>
    </a-table>
    <org-form ref="orgForm" @ok="handleSearch" />
  </a-card>
</template>

<script>
import { TabtreeData } from '@/utils/treeutil'
import { orgList, deptRemove } from '@/api/system/system'
import orgForm from './modules/orgForm'
export default {
  name: 'OrgList',
  components: {
    orgForm
  },
  data() {
    return {
      mdl: {},
      // 查询参数
      queryParam: {
        status: ''
      },
      // 表头
      columns: [
        {
          title: '组织名称',
          dataIndex: 'deptName',
          width: '200px'
        },
        {
          title: '员工数',
          dataIndex: 'staffNum',
          width: '120px'
        },
        {
          title: '地区',
          dataIndex: 'area',
          width: '200px'
        },
        {
          title: '成立日期',
          dataIndex: 'establishDate',
          width: '200px'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '160px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loading: false,
      data: [],
      expandedKeys: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created() {
    this.handleSearch()
  },
  methods: {
    handleSearch() {
      this.loading = true
      return orgList(Object.assign(this.queryParam)).then(res => {
        if (res.code === 0) {
          this.expandedRowKeys = []
          for (var item of res.data) {
            item.title = item.deptName
            item.key = item.deptId
            item.value = item.deptId
            this.expandedKeys.push(item.deptId)
          }
          this.data = TabtreeData(res.data, 'deptId', 'parentId', 'children', '0')
          this.loading = false
        } else {
          this.$message.error(res.msg)
          this.loading = false
        }
      })
    },

    onExpand(expanded, record) {
      if (expanded) {
        // 设置展开窗Key
        this.onExpandedRowsChange(record)
      } else {
        if (this.expandedKeys.length) {
          this.expandedKeys = this.expandedKeys.filter(v => {
            return v !== record.deptId
          })
        }
      }
    },
    onExpandedRowsChange(rows) {
      this.expandedKeys.push(rows.deptId)
    },

    handleReload() {
      this.handleSearch()
    },

    // 下拉
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

    // 重置
    resetSearchForm() {
      this.queryParam = {}
    },

    // 新增
    handleAdd() {
      var arr = JSON.parse(JSON.stringify(this.data))
      arr.unshift({ title: '无', key: 0, value: 0 })
      var params = {
        title: '新增组织',
        type: 'add',
        option: arr
      }
      this.$refs.orgForm.add(params)
    },

    // 编辑
    handleEdit(obj) {
      var arr = JSON.parse(JSON.stringify(this.data))
      arr.unshift({ title: '无', key: 0, value: 0 })
      var params = {
        title: '编辑组织',
        type: 'edit',
        data: obj,
        option: arr
      }
      this.$refs.orgForm.edit(params)
    },

    // 删除
    groupDelId(obj) {
      var _this = this
      this.$confirm({
        title: '删除组织',
        content: '是否确定删除该组织?',
        onOk() {
          var params = {
            deptId: obj.deptId
          }
          return deptRemove(params).then(res => {
            if (res.code === 0) {
              _this.$message.success('删除成功!')
              _this.handleSearch()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },

    handleOk() {
      this.$refs.table.refresh()
    }
  }
}
</script>
<style lang="less" scoped></style>
